var mapMarkers=[];

$(function(){
	
	$("#wrap").splitter({
		type: "v",
		outline: true,
		minLeft: 100, sizeLeft: 300,
		resizeToWidth:true,
		accessKey: "L"
	});
//	return;
	
	
	var map = new daum.maps.Map($('#map')[0], {
		center : new daum.maps.LatLng(37.537123, 127.005523),
		level : 12,
		mapTypeId : daum.maps.MapTypeId.HYBRID
	});
	
	//map.relayout()->undefined;;;
//	$(window).resize(function(){
//	
//		$('#map').css('height',$(window).height());
//		$('#menu').css('height',$(window).height());
//		$('.vsplitbar').css('height',$(window).height());
//		
//		console.log(map.relayout());
//	});
//	
	var infowindow = new daum.maps.InfoWindow({removable : true});
	var infowindowTemplate = $('#infowindowTemplate').html();
	
	//인포윈도우가 열린 상태에서 맵을 클릭하면 윈포 윈도우창이 닫힌다.
	daum.maps.event.addListener(map,'click',function(e){
		infowindow.close();
	});

	//kml 가져오는 부분..
	$.getJSON("xml2json.php?xml=test.kml",function(data){

		var marks = data.Document.Placemark;
		var marker = '',
			position='',
			pos='',
			bounds=new daum.maps.LatLngBounds();	

		
		
		//marker 표시 
		$(marks).each(function(){
			
			var pos = this.Point.coordinates.split(",");			
			position = new daum.maps.LatLng(pos[1], pos[0]);		
			marker = new daum.maps.Marker();
			marker.setPosition(position);
			marker.setMap(map);

			bounds.extend(position);

			marker.title = this.name;
			marker.description  = this.description;
			
			mapMarkers.push(marker);
			
			
			daum.maps.event.addListener(marker,'click',showInfoWindow);
			
			/*daum.maps.event.addListener(marker,'click',function(e){


				var html = tmpl("infowindowTemplate", {title:this.title,description:this.description});
				
				infowindow.setContent(html);
				infowindow.open(map,this);

				$('.infowindow img').bind('load',function(){
					
					infowindow.close();
					infowindow.open(map,this);
					
					
				}.bind(this));

				
			});	*/	
			
		});
		
		
		//menu list 표시
		var html = tmpl("menuListTemplate", {
			title:data.Document.name,
			description:data.Document.description,
			item : marks
		});
		$('#menu').html(html);
		
		
		$('#menu .list a').bind('click',function(){
			
			//console.log()
			var index = $("#menu .list a").index( this );
			var marker = mapMarkers[index];
			
			
			map.panTo(marker.getPosition());
			map.setLevel(7);
			
			showInfoWindow(marker);			
			
			return false;
		});
		
		//지도에 올라온 마크가 한눈에 잘보이게
		map.setBounds(bounds);
		
	});
	
	
	
	function showInfoWindow()
	{
		var marker =  arguments[0] || this;

		var html = tmpl("infowindowTemplate", {title:marker.title,description:marker.description});
		
		infowindow.setContent(html);
		infowindow.open(map,marker);

		$('.infowindow img').bind('load',function(){
			
			infowindow.close();
			infowindow.open(map,marker);
			$('.btn a').bind('click',showRoadview);
		}.bind(marker));
	}
	
	function showRoadview(){
		$('#roadview').css('display','block')
		var p = new daum.maps.LatLng(37.53729488297613, 127.00551022687515);
		var rc = new daum.maps.RoadviewClient();
		var rv = new daum.maps.Roadview($("#roadview"));
		
		    rc.getNearestPanoId(p, 50, function(panoid) {
			rv.setPanoId(panoid);
		});
	}
});
	 
	




// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};
  
  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
      
      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
        
        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +
        
        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");
    
    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();